<template>
  <div>
    <div @click="clickDatabase" class="vue-flow-model">
      <n-icon size="30" color="#18A058">
        <DataBase/>
      </n-icon>
      <Handle id="Database-export" type="source" :position="Position.Right"
              :is-valid-connection="props.isValidTargetPos"/>
    </div>
    <span>数据库</span>
    <flow-popup-window
        :show="popup.show"
        :on-click-outside="popup.clickPopupOutside"
        :x="popup.x"
        :y="popup.y"
    >
      <n-card title="数据库">
        <p>数据库服务器 Server</p>
        <n-input disabled v-model:value="database.server"/>
        <n-input disabled v-model:value="database.database"/>
        <n-input v-model:value="userName" placeholder="用户名"/>
        <n-input v-model:value="passwd" placeholder="密码"/>
        <n-button :disabled="userName!=='root'||passwd!=='123'" @click="connectedDatabase">连接数据库</n-button>
        <p>数据表</p>
        <n-select
            placeholder="选择数据库中的表"
            v-model:value="data_source_id"
            :options="database.children"
            label-field="name"
            value-field="id"
            :disabled="!connectionSuccessful"
            @update:value="popup.reopen"
        />
        <!--展示文件 已注释-->
        <n-data-table
            :columns="props.data.data.title"
            :data="props.data.data.data"
            :pagination="pagination"
            style="height: 300px"
            flex-height
            @update:page="updatePage"
        />
      </n-card>
    </flow-popup-window>
  </div>
</template>

<script setup>
import {DataBase} from "@vicons/carbon"
import {Handle, Position} from "@vue-flow/core";
import FlowPopupWindow from "@/components/VueFlowModel/vueFlowPopupWindow/FlowPopupWindow.vue";
import {NButton, NInput} from "naive-ui";
import workApi from "@/http/workApi";
import {useRoute} from "vue-router";


const props = defineProps(['isValidTargetPos', 'isValidSourcePos', 'data'])
const route = useRoute()

// 点击弹窗
const popup = reactive({
  show: false,
  x: null,
  y: null,
  clickPopupOutside: () => {
    popup.closedPopup()
  },
  openPopup: (e) => {
    popup.x = e.x
    popup.y = e.y
    popup.show = true
  },
  closedPopup: () => {
    popup.show = false
  },
  reopen: () => {
    popup.show = true
  }
})
let database = ref({
  // server: "https://127.0.0.1:3306",
  server: "https://www.digital-intelligence.com/database",
  database: "数据库名称",
  children: []
})
let userName = ref("")
let passwd = ref("")

function clickDatabase(e) {
  popup.openPopup(e)
  handleClick2()
  workApi.get("perform_tasks/get_database", {
    params: {
      task_id: route.query.taskId
    }
  }).then(r => {
    database.value = r.data
  })
}

const connectionSuccessful = ref(false)

function connectedDatabase() {
  window.$message.success("连接成功")
  connectionSuccessful.value = true
}

const data_source_id = ref(null)
watch(data_source_id, (newValue) => {
  workApi.post("perform_tasks/get_database", {
    data_source_id: newValue
  }).then(r=>{
    props.data.data =r.data
  })
})
let markAsRead = false
let isShowNotification = false
function handleClick2() {
  if (!isShowNotification) {
    const n = window.$notification.create({
      title: "连接数据库须知",
      content: `使用该组件可以连接数据库\n加载数据时间与数据库大小成正比, 请耐心等待\n连接用户名:  root\n连接密码:  123`,
      meta: "数据采集与应用分析数智化平台",
      action: () => h(
          NButton,
          {
            text: true,
            type: "primary",
            onClick: () => {
              popup.reopen()
              markAsRead = true
              n.destroy();
            }
          },
          {
            default: () => "已读"
          }
      ),
      onClose: () => {
        popup.reopen()
        if (!markAsRead) {
          window.$message.warning('请设为已读')
          return false
        }
      }
    });
    isShowNotification = true
  }
}
// 单页数据量
const pagination = {
  pageSize: 10
}

function updatePage() {
    popup.reopen()
}
</script>

<style scoped lang="less">
.n-card {
  width: 900px;

  .row {
    display: flex;
    align-items: center;
    margin: 10px 0;

    > span {
      margin-right: 20px;
    }
  }

}
</style>